<template>
  <div class="app-container">
    <h2 style="text-align: center">发布新课程</h2>
    <el-steps
      :active="1"
      process-status="wait"
      align-center
      style="margin-bottom: 40px;">
      <el-step title="填写课程基本信息"/>
      <el-step title="创建课程大纲"/>
      <el-step title="最终发布"/>
    </el-steps>
    <el-form label-width="120px">
        <el-form-item label="课程标题">
          <el-input v-model="courseInfo.title" placeholder="示例：机器学习项目课：从基础到搭建项目"/>
        </el-form-item>

        <!-- 所属分类 TODO -->
        <el-form-item label="课程分类">
          <el-select
          v-model="courseInfo.subjectParentId"
          placeholder="一级分类" @change="subjectLevelOneChanged">
            <el-option
            v-for="subject in subjectOneList"
            :key="subject.id"
            :label="subject.title"
            :value="subject.id"/>
          </el-select>

          <el-select
          v-model="courseInfo.subjectId"
          placeholder="二级分类">
            <el-option
            v-for="subject in subjectTwoList"
            :key="subject.id"
            :label="subject.title"
            :value="subject.id"/>
          </el-select>
        </el-form-item>

        <!-- 课程讲师 TODO -->
        <!-- 课程讲师 -->
        <el-form-item label="课程讲师">
          <el-select
          v-model="courseInfo.teacherId"
          placeholder="请选择">
            <el-option
            v-for="teacher in teacherList"
            :key="teacher.id"
            :label="teacher.name"
            :value="teacher.id"/>
          </el-select>
        </el-form-item>

        <el-form-item label="总课时">
          <el-input-number :min="0" v-model="courseInfo.lessonNum" controls-position="right" placeholder="课时数"/>
        </el-form-item>

        <!-- 课程简介 TODO -->
        <el-form-item label="课程简介">
          <el-input v-model="courseInfo.description" placeholder=""/>
        </el-form-item>


        <!-- 课程封面 TODO -->

        <el-form-item label="课程价格">
          <el-input-number :min="0" v-model="courseInfo.price" controls-position="right" placeholder=""/>元
        </el-form-item>

        <el-form-item>
          <el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate">保存并下一步</el-button>
        </el-form-item>
    </el-form>
  </div>
</template>
<script>
import course from '@/api/edu/course'
import subject from '@/api/edu/subject'
export default {
  data() {
    return {
      saveBtnDisabled: false,
      courseInfo: {
        title: '',
        subjectId: '',  // 二级分类id
        subjectParentId: '',  // 一级分类id
        teacherId: '',
        lessonNum: 0,
        description: '',
        cover: '',
        price: 0
      },
      teacherList:[], // 用于封装讲师所有的数据
      subjectOneList:[], // 用于封装一级分类
      subjectTwoList:[]  // 用于封装一级分类
    };
  },
  created() {
    // 初始化所有讲师
    this.getListTeacher()
    // 初始化一级分类
    this.getOneSubject()
  },
  methods: {
    // 4、点击某个一级分类，触发change，显示对应的二级分类
    subjectLevelOneChanged(value) {
      // value就是一级分类的id值，这是框架帮我们做到的
      // 遍历所有的分类，包含一级和二级
      for(var i=0; i<this.subjectOneList.length; i++) {
        // 获取每个一级分类
        var oneSubject = this.subjectOneList[i]
        // 判断所有一级分类id和点击的一级分类id是否一样
        if(value === oneSubject.id) {
          // 从一级分类获取里面所有的二级分类，注意如果courseInfo没有声明subjectId，二级分类将选不中
          this.subjectTwoList = oneSubject.children
          // 把二级分类id值清空
          this.courseInfo.subjectId = ''
        }
      }
    },

    // 3、查询课程分类：所有一级分类
    getOneSubject() {
      subject.getSubjectList().then(response => {
        this.subjectOneList = response.data.list
      })
    },

    // 2、查询所有的讲师
    getListTeacher() {
      course.getListTeacher().then(response => {
        this.teacherList = response.data.items
      })
    },

    // 1、新增或更新
    saveOrUpdate() {
      course.addCourseInfo(this.courseInfo).then(response => {
        // 提示
        this.$message({
          type: 'success',
          message: '添加课程信息成功!'
        })

        // 跳转到第二步
        this.$router.push({ path: "/course/chapter/"+response.data.courseId});
      })
      
    },
  },
};
</script>